<template>
  <div class="Ticketanalysis">

     <!-- 上 -->
     <div class="top">
       <!-- 左 -->
       <div class="top-1" style="margin-right: 20px;">
         <div class="top-1-1">
           <div class="tou"></div>
           <span>各航预定张数</span>
         </div>
         <div class="top-1-2">
           <div class="top-1-3">
            <span class="ash">国航</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">深航</span><br/>
            <span><span class="figure">2</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">海航</span><br/>
            <span><span class="figure">1136</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">东航</span><br/>
            <span><span class="figure">876</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">川航</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
         </div>
          <div class="hackhome-1"></div>
          <div class="top-3">
          <div class="top-1-3">
            <span class="ash">国航</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">国航</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           </div>
       </div>
       <!-- 右 -->
      <div class="top-1" style="margin-right: 20px">
         <div class="top-1-1">
            <div class="tou"></div>
           <span>各舱位预定张数</span>
         </div>
           <div class="top-1-2">
           <div class="top-1-3">
            <span class="ash">未分级</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">头等舱</span><br/>
            <span><span class="figure">2</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">公务舱</span><br/>
            <span><span class="figure">1136</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">经济舱</span><br/>
            <span><span class="figure">876</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">特价公务舱</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
            <div class="top-1-3">
            <span class="ash">超值头等舱</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
         </div>
          <div class="hackhome-1"></div>
          <div class="top-3">
          <div class="top-1-3">
            <span class="ash">特价经济舱</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">豪华头等舱</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">优选套餐</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">经济优选</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           </div>
       </div>
     </div>
        <!-- 中 -->
      <div class="top">
       <!-- 左 -->
       <div class="top-1" style="margin-right: 20px;">
         <div class="top-1-1">
            <div class="tou"></div>
           <span>附加产品购买次数</span>
         </div>
          <div class="top-1-2">
           <div class="top-1-3">
            <span class="ash">航旅关怀</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">德付通保险</span><br/>
            <span><span class="figure">2</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">延误取消险</span><br/>
            <span><span class="figure">1136</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">旅游卷</span><br/>
            <span><span class="figure">876</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">酒店卷</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">经济优选</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
         </div>
          <div class="hackhome-1"></div>
           <div class="top-1-2">
           <div class="top-1-3">
            <span class="ash">机场服务</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">登机牌</span><br/>
            <span><span class="figure">2</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">贵宾厅</span><br/>
            <span><span class="figure">1136</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">餐饮</span><br/>
            <span><span class="figure">876</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">代驾卷</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">旅游</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
         </div>
       </div>
       <!-- 右 -->
      <div class="top-1" style="margin-right: 20px;">
         <div class="top-1-1">
            <div class="tou"></div>
           <span>平价机票</span>
         </div>
          <div class="top-1-2">
           <div class="top-1-3">
            <span class="ash">800</span><br/>
            <span><span class="figure">61</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">800-1000</span><br/>
            <span><span class="figure">2</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">1000-1500</span><br/>
            <span><span class="figure">1136</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">1500-2000</span><br/>
            <span><span class="figure">876</span>单</span>
           </div>
           <div class="top-1-3">
            <span class="ash">2000</span><br/>
            <span><span class="figure">912</span>单</span>
           </div>
         </div>         
       </div>
     </div>

  </div>
</template>

<script>
export default {
  name: 'Ticketanalysis',
  data() { 
    return {
      // activeName: 'first'      
    }
  },
  components:{
  },
  mounted() {
  
  },
  methods:{
    
  },
 }
</script>

<style scoped>
.Ticketanalysis{
  height: 100%;
  background-color: #F7F7F7;
}
.tou {
  width: 3.5px;
  height: 14px;
  background-color: #4b71bf;
  margin-right: 4px;
}
.tou-1 {
  width: 96%;
  height: 17px;
  display: flex;
  justify-content: space-between;
}
.touu {
  width: 96%;
  height: 17px;
  display: flex;
  justify-content: space-between;
}
.header{
  padding-top: 10px;
  padding-left: 20px;
  display: flex;
}
.header-1{
  padding-top: 10px;
  display: flex;
  padding-left: 28%;
}
.header-1-1{
  font-size: 12px;
  color: #FF0000;
  font-weight: bolder;
  padding-top: 5px;
  margin-right: 2px;
}
.top{
  display: flex;
  margin-left: 30px;
  margin-top: 10px;
}
.top-1{
  width: 48%;
  height: 164px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  margin-bottom: 20px;
}

.top-1-1{
  display: flex;
}
.top-1-1>span{
  font-weight: bolder;
  font-size: 12px;
}

.top-1-2{
  display: flex;
}
.top-1-3{
  font-size: 10px;
  margin-top: 13px;
  margin-right: 40px; 
  width: 70px;
}
.figure{
  font-size: 16px;
}
.hackhome-1{
  border-top:1px
  solid #BDBDBD; 
  width:96%;
  margin-top: 20px;
  margin-bottom: 10px;
}
.top-3{
  display: flex;
}
.ash{
  font-size: 10px;
  color: #828282;
}
.top-5{
  display: flex;
  padding-left: 30px;
}
.top-6{
  width: 48%;
  height: 196px;
  background-color: #fff;
  margin-top: 13px;
  padding-top: 20px;
  padding-left: 20px;
}
.top-6-1{
  display: flex;
}
.top-6-1>span{
  font-weight: bolder;
  font-size: 12px;
}
.top-7{
  width: 48%;
  height: 470px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  margin-top: 13px;
  /* display: flex; */
}
.line{
  margin-top: 15px;
}
.el-icon-plus{
  font-size: 12px;
  color: #2F80ED;
  font-weight: bolder;
}
.verbaltrick{
  display: flex;
}
.verbaltrick-1{
  margin-top: 20px;
  width: 48%;
  height: 420px;
  margin-right: 20px;
}
.verbaltrick-1-1{
  width: 100%;
  background-color: #F7F6F9;
  height: 164px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-left: 10px;
}
.verbaltrick-1-2{
  padding-top: 10px;
  width: 100%;
  background-color: #F7F6F9;
  height: 94px;
  margin-bottom: 20px;
  padding-left: 10px;
}
.el-icon-edit-1,.el-icon-edit{
  font-weight: bolder;
  font-size: 10px;
}
.zi{
  margin-top: 5px;
  font-size: 10px;
}
.eledit{
font-size: 10PX;
}
.aaa{
  display: flex;
  font-size: 20px;
  height: 100px;
  line-height: 100px;
}
</style>